<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转木马</title>
	<style>
		*{margin:0;padding:0;}
		.rongqi{
			width:600px;
			height:600px;
			border:1px solid #fff;
			margin:20px auto;
			position:relative;
			/*transform-style:preserve-3d;*/
			perspective:1000px;
			perspective-origin:50% 50%;
		}
		.box{
			transform-style:preserve-3d;
			width:100px;
			height:150px;
			border:1px solid red;
			margin:auto auto;
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
			transform-style:preserve-3d;
			animation:mybox 5s infinite linear;
			/*transform-origin:50% 50%;*/
		}
		.box>div{
			width:100px;
			height:150px;
			border:1px solid black;
			background-color:rgba(0,0,0,0.2);
			position:absolute;
			font-size:20px;
			color:#fff;
			text-align:center;
			line-height:150px;
			/*display:none;
			/*margin-left:150px;*/
			animation:mybox1 5s infinite linear;
		}
		@keyframes mybox{
			0%{
				transform:rotateY(0deg);
			}
			100%{
				transform:rotateY(360deg);
			}
		}
		
		.box1{
			transform:/*rotateY(0deg) */translateZ(300px);			
		}
		.box2{
			transform:rotateY(30deg) translateZ(300px);
		}
		.box3{
			transform:rotateY(60deg) translateZ(300px);
		}
		.box4{
			transform:rotateY(90deg) translateZ(300px);
		}
		.box5{
			transform:rotateY(120deg) translateZ(300px);
		}
		.box6{
			transform:rotateY(150deg) translateZ(300px);
		}
		.box7{
			transform:rotateY(180deg) translateZ(300px);
		}
		.box8{
			transform:rotateY(210deg) translateZ(300px);
		}
		.box9{
			transform:rotateY(240deg) translateZ(300px);
		}
		.box10{
			transform:rotateY(270deg) translateZ(300px);
		}
		.box11{
			transform:rotateY(300deg) translateZ(300px);
		}
		.box12{
			transform:rotateY(330deg) translateZ(300px);
		}
		/*.box:hover div{
			display:block;
		}*/
	</style>
</head>
<body>
	<div class="rongqi">
		<div class="box">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
			<div class="box3">box3</div>
			<div class="box4">box4</div>
			<div class="box5">box5</div>
			<div class="box6">box6</div>
			<div class="box7">box7</div>
			<div class="box8">box8</div>
			<div class="box9">box9</div>
			<div class="box10">box10</div>
			<div class="box11">box11</div>
			<div class="box12">box12</div>
		</div>
	</div>
</body>
</html>